<!DOCTYPE html>
<html style="background-color: #F2F2F2;">
<head>
	
	<title><?php echo _PLATFORM_TITLE_; ?></title>

	<?php $this->setFlag('vue,lazyload,wxshare,swiper'); ?>
	<?php $this->import('meta'); ?>

	<link rel="stylesheet" type="text/css" href="html/platformwap/electronic/css/info.css?v=19" />

    <script type="text/javascript" src="html/platformwap/electronic/js/info.js?v=23"></script>

</head>
<body>

	<div style="display: none;"></div>
	<div id="loadSpin" class="bg"></div>

	<?php $this->import('focus'); ?>

	<div id="mainBg" class="bg" style="display: none;">

		<input type="text" id="from" class="display-none" />
		<input type="text" id="electronicid" v-bind:value="info.electronicid" class="display-none" />
		<input type="text" id="imgstatus" value="small" class="display-none">

		<div class="title-bar">
			<img class="left-img" src="static/pic/wap/back.png" onclick="toBack()" />
            <div class="title">家电维修</div>
            <img class="right-img" style="visibility: hidden;" />
        </div>

        <template v-if="info.picList != null && info.picList.length > 0">
			<div id="swiperBar" class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide swiper-img1 pos1" v-for="pic in info.picList" onclick="showSwiperPic()">
						<img class="swiper-slide swiper-img2 pos2" v-lazy="pic.path" />
					</div>
				</div>
			</div>
		</template>

        <div class="info-bar">
        	<div class="info-title">{{ info.title }}</div>
        	<div class="info-feature-bar">
                <div class="info-feature" v-for="feature in info.feature">{{ feature }}</div>
                <template v-if="info.company_verifyid != null && info.company_verifyid != ''">
                	<div class="info-verify-bar">
	                	<img class="info-verify-pic" src="static/pic/wap/verify.png" />
						<div class="info-verify-text">商家认证</div>
	                </div>
                </template>
                <!-- <template v-else>
                	<div class="info-owner">个人自营</div>
                </template> -->
            </div>
            <div class="info-area-bar">
            	<div class="info-area">{{ info.area }}</div>
            	<div class="info-time">{{ info.difftime }}</div>
            </div>
        </div>

        <template v-if="info.address != null && info.address != ''">
        	<div class="info-bar2" v-on:click="openMap(info.position)">
	        	<img class="info-address-icon" src="static/pic/wap/address.png" />
	        	<div class="info-address">{{ info.address }}</div>
	        	<template v-if="info.position != ''">
	        		<img class="info-address-position" src="static/pic/wap/right.png" />
	        	</template>
	        </div>
        </template>

        <div class="info-bar2">
        	<img class="info-phone-icon" src="static/pic/wap/phone3.png" />
        	<div class="info-phone-text-bar">
        		<div class="info-phone-text-up">联系人：{{ info.person }}</div>
        		<div class="info-phone-text-down">办理服务前，切勿提前支付任何费用！</div>
        	</div>
        	<div class="info-phone-btn" v-on:click="call(info.phone)">打电话</div>
        </div>

        <div class="info-bar3">
        	<div class="info-subhead-bar">
				<div class="info-subhead">服务项目</div>
			</div>
			<div class="info-category-bar">
				<div class="info-category" id="category1">
					<img class="info-category-img" src="static/pic/wap/category1.png" />
                    <div class="info-category-text">空调维修</div>
				</div>
				<div class="info-category" id="category2">
					<img class="info-category-img" src="static/pic/wap/category2.png" />
                    <div class="info-category-text">热水器维修</div>
				</div>
				<div class="info-category" id="category3">
					<img class="info-category-img" src="static/pic/wap/category3.png" />
                    <div class="info-category-text">洗衣机维修</div>
				</div>
				<div class="info-category" id="category4">
					<img class="info-category-img" src="static/pic/wap/category4.png" />
                    <div class="info-category-text">电视机维修</div>
				</div>
				<div class="info-category" id="category5">
					<img class="info-category-img" src="static/pic/wap/category5.png" />
                    <div class="info-category-text">冰箱维修</div>
				</div>
				<div class="info-category" id="category6">
					<img class="info-category-img" src="static/pic/wap/category6.png" />
                    <div class="info-category-text">油烟机维修</div>
				</div>
				<div class="info-category" id="category7">
					<img class="info-category-img" src="static/pic/wap/category7.png" />
                    <div class="info-category-text">燃气灶维修</div>
				</div>
				<div class="info-category" id="category8">
					<img class="info-category-img" src="static/pic/wap/category8.png" />
                    <div class="info-category-text">太阳能维修</div>
				</div>
				<div class="info-category" id="category9">
					<img class="info-category-img" src="static/pic/wap/category9.png" />
                    <div class="info-category-text">冷库维修</div>
				</div>
				<div class="info-category" id="category10">
					<img class="info-category-img" src="static/pic/wap/category10.png" />
                    <div class="info-category-text">麻将机维修</div>
				</div>
				<div class="info-category" id="category11">
					<img class="info-category-img" src="static/pic/wap/category11.png" />
                    <div class="info-category-text">变频器维修</div>
				</div>
				<div class="info-category" id="category12">
					<img class="info-category-img" src="static/pic/wap/category12.png" />
                    <div class="info-category-text">其他</div>
				</div>
			</div>
        </div>

        <div class="info-bar3">
        	<div class="info-subhead-bar">
				<div class="info-subhead">服务详情</div>
			</div>
			<div class="info-introduce" v-html="info.introduce">
			</div>
			<div class="info-more" onclick="viewIntroduce()" style="display: none;">展开全部>></div>
        </div>
        <div class="info-separate"></div>

        <!-- <img class="info-pic" v-lazy="pic.path" v-for="pic in info.picList" /> -->

        <div class="info-bar4">如遇虚假、诈骗信息或服务纠纷，请立刻<span class="info-font1" v-on:click="openReportBar(info.title)">举报</span></div>

        <div class="phone-empty"></div>
        <div id="phoneBar" class="phone-bar">
            <div class="phone-person-bar">
            	<div class="phone-text1">联系人：{{ info.person }}</div>
            	<!-- <div class="phone-text2">{{ info.phone }}</div> -->
            </div>
            <div class="phone-btn-bar" v-on:click="call(info.phone)">
            	<img class="phone-icon" src="static/pic/wap/phone2.png" />
            	<div class="phone-text3">打电话</div>
            </div>
        </div>



        <div id="introduceBar" style="display: none;">
        	<div class="details-bar">
        		<div class="details-content">
	        		<div class="info-subhead-bar">
						<div class="info-subhead">服务详情</div>
					</div>
					<div class="info-introduce2" v-html="info.introduce">
					</div>
	        	</div>
				<div class="details-tool">
					<div class="details-btn" onclick="closeSlipDetailsDiv()">关闭</div>
				</div>
        	</div>
        </div>

	</div>

	<?php $this->import('totop'); ?>
	<?php $this->import('slipiframe'); ?>
	<?php $this->import('slipdetails'); ?>
	<?php $this->import('slipedit'); ?>
	<?php $this->import('slipselect'); ?>
	<?php $this->import('report'); ?>

	<script type="text/javascript">
        var electronic = new Vue({
            el: '#mainBg',
            data: {
                info: ''
            },
            mounted() {
            	Vue.use(VueLazyload);
            },
            watch: {
            	info() {
            		this.$nextTick(() => {
            			if (electronic.info.category != null && electronic.info.category != '') {
            				var categoryList = ['空调维修', '热水器维修', '洗衣机维修', '电视机维修', '冰箱维修', '油烟机维修', '燃气灶维修', '太阳能维修', '冷库维修', '麻将机维修', '变频器维修', '其他'];
            				for (var i = 0; i < categoryList.length; i++) {
            					if (electronic.info.category.includes(categoryList[i])) {
            						setDisplay('category' + (i + 1), '');
            					}
            					else {
            						setDisplay('category' + (i + 1), 'none');
            					}
            				}
            			}

            			var mySwiper = new Swiper('.swiper-container', {
							direction: 'horizontal', 
							loop: false, 
							speed: 300, 
							initialSlide: 0, 
							autoplay: {
								disableOnInteraction: false, 
								delay: 5000
							}
						});
            		})
            	}
            }
        });
    </script>

</body>
</html>